<jsp:useBean id="user" scope="session" type="com.wutong.eams.entity.User"/>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
  <title>个人信息</title>
  <style>
    .profile-container {
      color: #34495e;
      padding: 20px;
      max-width: 900px;
      margin: 0 auto;
    }
    .avatar-large {
      width: 120px;
      height: 120px;
      margin: 0 auto;
      border-radius: 50%;
      background: #3498db;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 48px;
      color: white;
      font-weight: bold;
    }
    .info-group {
      margin-bottom: 20px;
    }
    .info-group label {
      display: block;
      color: #7f8c8d;
      font-size: 14px;
      margin-bottom: 5px;
    }
    .info-value {
      padding: 8px 0;
      font-size: 15px;
      border-bottom: 1px solid #eee;
      min-height: 20px;
    }
    /* 安全设置区域 */
    .security-section {
      margin-top: 40px;
      padding: 25px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .security-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #f0f3f7;
    }
    .security-header i {
      font-size: 20px;
      margin-right: 10px;
      color: #3498db;
    }
    .security-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
    }
    .security-item:not(:last-child) {
      border-bottom: 1px solid #f5f7fa;
    }
    .security-title {
      font-weight: 500;
    }
    .security-desc {
      font-size: 13px;
      color: #7f8c8d;
      margin-top: 5px;
    }
    .btn-change {
      padding: 8px 16px;
      background: #3498db;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .btn-change:hover {
      background: #2980b9;
      transform: translateY(-1px);
    }
    /* 模态框样式 */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }
    .modal-content {
      background: white;
      padding: 30px;
      border-radius: 10px;
      width: 400px;
      max-width: 90%;
      box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }
    .modal-title {
      font-size: 20px;
      margin-bottom: 20px;
      color: #2c3e50;
    }
    .form-group {
      margin-bottom: 20px;
    }
    .form-group label {
      display: block;
      margin-bottom: 8px;
      color: #7f8c8d;
    }
    .form-group input {
      width: 100%;
      padding: 10px 15px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 15px;
    }
    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 30px;
    }
    .btn-cancel {
      background: #f8f9fa;
      color: #2c3e50;
    }
  </style>
</head>
<body>
<div class="profile-container">
  <h2 style="margin-bottom: 25px; color: #2c3e50; padding-bottom: 15px; border-bottom: 2px solid #f0f3f7;">
    个人信息
  </h2>

  <div style="display: flex; margin-bottom: 30px;">
    <div style="flex: 0 0 200px; text-align: center;">
      <div class="avatar-large">${user.realName.charAt(0)}</div>
      <div style="margin-top: 15px; font-weight: 500;">${user.username}</div>
    </div>

    <div style="flex: 1; padding-left: 30px;">
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
        <div class="info-group">
          <label>姓名</label>
          <div class="info-value">${user.realName}</div>
        </div>
        <div class="info-group">
          <label>角色</label>
          <div class="info-value">
            ${user.role == 'admin' ? '管理员' : (user.role == 'teacher' ? '教师' : '学生')}
          </div>
        </div>
        <div class="info-group">
          <label>性别</label>
          <div class="info-value">
            ${user.gender == 'M' ? '男' : (user.gender == 'F' ? '女' : '未知')}
          </div>
        </div>
        <div class="info-group">
          <label>电子邮箱</label>
          <div class="info-value">
            ${empty user.email ? '未设置' : user.email}
          </div>
        </div>
        <div class="info-group">
          <label>联系电话</label>
          <div class="info-value">
            ${empty user.phone ? '未设置' : user.phone}
          </div>
        </div>
        <div class="info-group">
          <label>账号状态</label>
          <div class="info-value">
            ${user.status == 1 ? '正常' : '已禁用'}
          </div>
        </div>
<%--        <div class="info-group">--%>
<%--          <label>注册时间</label>--%>
<%--          <div class="info-value">--%>
<%--            <fmt:formatDate value="${user.createTime}" pattern="yyyy-MM-dd HH:mm"/>--%>
<%--          </div>--%>
<%--        </div>--%>
      </div>
    </div>
  </div>

  <!-- 安全设置区域 -->
  <div class="security-section">
    <div class="security-header">
      <i>🔒</i>
      <h3>账户安全</h3>
    </div>

    <div class="security-item">
      <div>
        <div class="security-title">登录密码</div>
        <div class="security-desc">最后一次修改：${user.updateTime == null ? "未修改" : user.updateTime.toString()}</div>
      </div>
      <button class="btn-change" onclick="showModal()">修改密码</button>
    </div>

<%--    <div class="security-item">--%>
<%--      <div>--%>
<%--        <div class="security-title">账户绑定</div>--%>
<%--        <div class="security-desc">已绑定手机：${empty user.phone ? '未绑定' : user.phone.replaceAll("(\\d{3})\\d{4}(\\d{4})", "$1****$2")}</div>--%>
<%--      </div>--%>
<%--      <button class="btn-change" onclick="showBindModal()">更换手机</button>--%>
<%--    </div>--%>
  </div>
</div>

<!-- 修改密码模态框 -->
<div id="passwordModal" class="modal">
  <div class="modal-content">
    <div class="modal-title">修改密码</div>
    <form id="passwordForm">
      <div class="form-group">
        <label>当前密码</label>
        <input type="password" required>
      </div>
      <div class="form-group">
        <label>新密码</label>
        <input type="password" required>
      </div>
      <div class="form-group">
        <label>确认新密码</label>
        <input type="password" required>
      </div>
      <div class="modal-actions">
        <button type="button" class="btn-change btn-cancel" onclick="hideModal()">取消</button>
        <button type="submit" class="btn-change">确认修改</button>
      </div>
    </form>
  </div>
</div>

<script>
  // 显示模态框
  function showModal() {
    document.getElementById('passwordModal').style.display = 'flex';
  }

  // 隐藏模态框
  function hideModal() {
    document.getElementById('passwordModal').style.display = 'none';
  }

  // 表单提交处理
  document.getElementById('passwordForm').addEventListener('submit', function(e) {
    e.preventDefault();
    alert('密码修改成功！');
    hideModal();
  });

  // 点击模态框外部关闭
  document.getElementById('passwordModal').addEventListener('click', function(e) {
    if(e.target === this) hideModal();
  });
</script>
</body>
</html>
